    <div class="footer">
        <style>
            /* 网页底部 start*/
            #footer {color: #333;width: 100%;border-top: 1px solid #d04;}
            
            #footer-top {width: 100%;}
            .footer-top .iconFooter{color: #d04;font-size: 48px;margin-right: 12px;}
            .footer-top {width: 1200px;margin: 0px auto;}
            .footer-top>ul{display: flex;justify-content: space-between;font-size: 16px;font-weight: bold;padding-top: 30px;}
            .footer-top>ul>li{height: 50px;display: flex;align-items: center;}
            .footer-top .spacer{border-left: 1px solid #ddd;}
            
            #footer-middle{width: 100%;margin-top: 50px;}
            .footer-middle{width: 1200px;margin: 0 auto;border-top: 1px solid #ddd;padding-top: 20px;display: flex;justify-content: space-between;}
            .footer-middle>ul{display: flex;justify-content: left;box-sizing: border-box;padding:0px 15px;}
            .footer-middle>ul>li dt{font-size: 14px;font-weight: bold;width: 124px;margin-bottom: 7px;}
            .footer-middle>ul>li dd{font-size: 13px;color: #666;}
            .footer-middle>ul .spacer{border-left: 1px solid #ddd;margin-right: 54px;}
            .footer-middle>div{font-size: 13px;}
            .footer-middle>div img{float: left;margin-right: 8px;}
            .footer-middle>div p{color: #666;overflow: hidden;white-space:nowrap;}
            .footer-middle>div>p:nth-child(1){color: #333;font-size: 14px;font-weight: bold;margin-bottom: 7px;}
            
            #footer-bottom{width: 100%;}
            .footer-bottom{width: 1200px;margin: 20px auto 0;border-top: 1px solid #ddd;padding-top: 20px;text-align: center;}
            .footer-bottom ul{margin: 20px auto 0;padding-bottom: 20px ;display: flex;justify-content: center;}
            .footer-bottom ul li{margin: 0px 2px;}
            /* 网页底部 end*/
        </style>
        <div id="footer-top">
            <div class="footer-top">
                <ul>
                    <li>
                        <svg class="icon iconFooter" aria-hidden="true">
                            <use xlink:href="#icon-dianpu"></use>
                        </svg>
                        <span>正品保障，购物无忧</span>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <svg class="icon iconFooter" aria-hidden="true">
                            <use xlink:href="#icon-peisong"></use>
                        </svg>
                        <span>全类覆盖，一站购齐</span>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <svg class="icon iconFooter" aria-hidden="true">
                            <use xlink:href="#icon-301"></use>
                        </svg>
                        <span>全国配送，送货到桌</span>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <svg class="icon iconFooter" aria-hidden="true">
                            <use xlink:href="#icon-kefu"></use>
                        </svg>
                        <span>在线客服，贴身顾问</span>
                    </li>
                </ul>
            </div>
        </div>
        <div id="footer-middle">
            <div class="footer-middle">
                <ul>
                    <li>
                        <dl>
                            <dt>购物指南</dt>
                            <dd>常见问题</dd>
                            <dd>发票流程</dd>
                            <dd>购物流程</dd>
                        </dl>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <dl>
                            <dt>配送方式</dt>
                            <dd>配送物流查询</dd>
                            <dd>配送时间与方式</dd>
                            <dd>得力紧急服务方案</dd>
                        </dl>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <dl>
                            <dt>支付方式</dt>
                            <dd>支付方式</dd>
                            <dd>货到付款</dd>
                            <dd>在线支付</dd>
                        </dl>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <dl>
                            <dt>售后服务</dt>
                            <dd>退换货政策</dd>
                            <dd>退换货流程</dd>
                            <dd>联系售后</dd>
                        </dl>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <dl>
                            <dt>关于得力</dt>
                            <dd>公司简介</dd>
                            <dd>联系我们</dd>
                            <dd>在线客服</dd>
                        </dl>
                    </li>
                    <li class="spacer"></li>
                </ul>
                <div>
                    <p>微信公众号</p>
                    <img src="./images/index/head/QRcode.jpg" alt="">
                    <p>扫一扫！关注得力办公商城</p>
                    <p>售前热线：400-168-0888</p>
                    <p>售后热线：400-185-0555</p>
                    <p>工作日：08:00-17:00</p>
                </div>
            </div>
        </div>
        <div id="footer-bottom">
            <div class="footer-bottom">
                <p class="Copyright">Copyright&copy;2014-2021 得力集团 版权所有 浙ICP备06004512号</p>
                <ul>
                    <li><a href=""><img src="./images/index/footer/blxx.jpg" alt=""></a></li>
                    <li><a href=""><img src="./images/index/footer/wljc.jpg" alt=""></a></li>
                    <li><a href=""><img src="./images/index/footer/zgwm.jpg" alt=""></a></li>
                    <li><a href=""><img src="./images/index/footer/gswj.jpg" alt=""></a></li>
                    <li><a href=""><img src="./images/index/footer/cxwz.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="header">
        <style>
        /* head */
        #header {width: 100%;}
        #header>div {width: 100%;}
        /* 头部顶端样式 */
        #head-top {background-color: #f4f4f4;}
        .head-top {font-size: 12px;width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
        .head-top>.head-t-l {color: #616161;display: flex;}
        .head-top>.head-t-l>div {margin-left: 20px;display: flex;}
        .head-top>.head-t-r {color: #777777;list-style: none;display: flex;align-items: center;}
        .head-top>.head-t-r>li {margin-left: 5px;line-height: 28px;}
        .head-top>.head-t-r>.space {width: 1px;height: 12px;background-color: #ccc;}

        /* 头部中间样式 */
        .head-middle {
            width: 1200px;
            margin: 0 auto;
            padding: 20px 0px 30px 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }

        .head-middle>.head-middle-search>ul {
            display: flex;
        }

        .head-middle>.head-middle-shoppingCart {
            background-color: #d04;
            color: white;
            height: 32px;
            line-height: 32px;
        }

        .head-middle>.head-middle-shoppingCart>.iconCart {
            font-size: 32px;
        }

        .head-middle>.head-middle-shoppingCart>span {
            line-height: 32px;
        }

        .head-middle>.head-middle-shoppingCart>span:nth-child(2) {
            font-size: 14px;
        }

        .head-middle>.QR-code {
            text-align: center;
        }

        /* 头部底端样式 */
        #head-bottom {
            border-bottom: 2px solid #d04;
        }

        .head-bottom {
            width: 1200px;
            margin: 0px auto;
            display: flex;
            font-size: 16px;
        }

        .head-bottom>#allClassificationOfGoods {
            background-color: #d04;
            color: white;
            font-size: 16px;
            box-sizing: border-box;
            width: 200px;
            height: 34px;
            padding-left: 20px;
            line-height: 34px;
        }

        .head-bottom>ul {
            display: flex;
            padding-left: 20px;
            color: #666;
            font-family: "微软雅黑";
            font-weight: bold;
            line-height: 34px;
        }

        .head-bottom>ul>li {
            padding: 0px 20px;
        }
        </style>
        <div id="head-top">
            <div class="head-top">
                <div class="head-t-l">
                    <p>欢迎光临得力办公商城</p>
                    <div>
                        <span>配送至：</span>
                        <div></div>
                    </div>
                </div>
                <div class="head-t-c"><a href=""><i></i><span>得力集团官网</span></a></div>
                <ul class="head-t-r">
                    <li>请登录</li>
                    <li class="space"></li>
                    <li>我的订单</li>
                    <li class="space"></li>
                    <li>我的得力</li>
                </ul>
            </div>
        </div>
        <div id="head-middle">
            <div class="head-middle">
                <h1><a href=""><img src="./images/index/head/logo.jpg" alt=""></a></h1>
                <div class="head-middle-search">
                    <div>
                        <input type="text">
                        <img src="" alt="">
                    </div>
                    <ul>
                        <li>测温仪</li>
                        <li>消毒液</li>
                        <li>口罩</li>
                        <li>复印纸</li>
                        <li>文件夹</li>
                        <li>计算器</li>
                        <li>剪刀</li>
                        <li>订书机</li>
                    </ul>
                </div>
                <div class="head-middle-shoppingCart">
                    <svg class="icon iconCart" aria-hidden="true">
                        <use xlink:href="#icon-24gl-cartFull10"></use>
                    </svg>
                    <span>购物车</span>
                    <span>0件</span>
                </div>
                <div class="QR-code">
                    <img src="./images/index/head/QRcode.jpg" alt="">
                    <p>关注微信公众号</p>
                </div>
            </div>
        </div>
        <div id="head-bottom">
            <div class="head-bottom">
                <div id="allClassificationOfGoods">
                    <svg class="icon iconCaidan" aria-hidden="true">
                        <use xlink:href="#icon-caidan"></use>
                    </svg>
                    <b>所有商品分类</b>
                </div>
                <ul>
                    <li>首页</li>
                    <li>采购专区</li>
                    <li>得力商城</li>
                    <li>工业品商城</li>
                    <li>场景采购</li>
                    <li>产品定制</li>
                    <li>智能办公</li>
                    <li>快递订单</li>
                    <li>耗材搜索器</li>
                </ul>
            </div>
        </div>
    </div>